<template>
  <div class="search-sidebar">
    <div class="scrollable-content">
      <el-form label-position="top" :model="modelValue" class="smart-form">
        <el-form-item
          v-for="(item, index) in searchOptions"
          :key="index"
          :label="item.label"
          class="form-item-custom"
        >
          <!-- 单选 -->
          <el-radio-group
            v-if="item.type === 'radio'"
            v-model="modelValue[item.prop]"
            class="radio-group-soft"
            @change="change"
          >
            <el-radio
              v-for="(opt, i) in item.options"
              :key="i"
              :label="opt.value"
              class="radio-soft"
            >
              {{ opt.label }}
            </el-radio>
          </el-radio-group>

          <!-- 复选 -->
          <el-checkbox-group
            v-else-if="item.type === 'checkbox'"
            v-model="modelValue[item.prop]"
            class="checkbox-group-pill"
            @change="change"
          >
            <el-checkbox
              v-for="(opt, i) in item.options"
              :key="i"
              :label="opt.value"
              class="checkbox-pill"
            >
              {{ opt.label }}
            </el-checkbox>
          </el-checkbox-group>

          <!-- 下拉 -->
          <el-select
            v-else-if="item.type === 'select'"
            v-model="modelValue[item.prop]"
            placeholder="请选择"
            clearable
            popper-class="select-popper-rounded"
            class="select-rounded"
            @change="change"
          >
            <el-option
              v-for="(opt, i) in item.options"
              :key="i"
              :label="opt.label"
              :value="opt.value"
            />
          </el-select>

          <!-- 输入框 -->
          <el-input
            v-else-if="item.type === 'input'"
            v-model="modelValue[item.prop]"
            :placeholder="item.placeholder || '请输入'"
            class="input-rounded"
            clearable
            @change="change"
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  serviceShippingSearchOptions,
  salesSearchOptions,
  financeSearchOptions
} from '../../filterOptions/options';

const props = defineProps({
  modelValue: { type: Object, required: true },
  role: { type: String, default: '' }
});

const emits = defineEmits(['change']);

const modelValue = ref({});
const searchOptions = ref([]);

// 根据角色获取配置
const getOptionsByRole = () => {
  switch (props.role) {
    case 'sales':
      return salesSearchOptions;
    case 'service':
    case 'shipping':
      return serviceShippingSearchOptions;
    case 'finance':
      return financeSearchOptions;
    default:
      return [];
  }
};

// 根据配置初始化默认值
const initDefaultValues = () => {
  searchOptions.value.forEach((item) => {
    const first = item.options?.[0]?.value;

    switch (item.type) {
      case 'radio':
      case 'select':
        modelValue.value[item.prop] = first;
        break;
      case 'checkbox':
        modelValue.value[item.prop] = [first];
        break;
      case 'input':
        modelValue.value[item.prop] = '';
        break;
    }
  });
};

// checkbox 互斥逻辑（“全部” 只能单选）
const handleCheckboxExclusive = () => {
  searchOptions.value.forEach((item) => {
    if (item.type !== 'checkbox') return;

    let val = modelValue.value[item.prop];
    if (!Array.isArray(val)) return;

    const last = val[val.length - 1];
    const selectedAll = last === '';

    modelValue.value[item.prop] = selectedAll
      ? [''] // “全部”被选中，只保留它
      : val.filter((v) => v); // 否则去掉空值
  });
};

// change 事件统一处理
const change = () => {
  handleCheckboxExclusive();

  const formData = { ...modelValue.value };

  // 多选状态数组转换为后端需要的字符串
  if (Array.isArray(formData.orderStatus) && formData.orderStatus.length > 0) {
    formData.orderStatus = formData.orderStatus.join(',');
  }

  emits('change', formData);
};

onMounted(() => {
  searchOptions.value = getOptionsByRole();
  initDefaultValues();
});
</script>

<style lang="scss" scoped>
$search-bg: #f8f9fa;
$border-color: #e0e0e0;
$text-color: #2c3e50;
$primary-color: #4361ee;
$radius-md: 12px;
$padding-sm: 12px;
$padding-md: 16px;
$control-width: 110px; // 统一控件宽度

.search-sidebar {
  display: inline-block;
  padding: 15px 15px 0 15px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  transition: all 0.3s ease;
  overflow: hidden;
  box-sizing: border-box;
  height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
}

// 可滚动区域
.scrollable-content {
  height: 100%; // 可根据需要调整
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}

.smart-form :deep(.el-form-item) {
  margin-bottom: $padding-sm;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: $control-width;
  width: max-content;
}

.smart-form :deep(.el-form-item__label) {
  font-weight: 600;
  color: $text-color;
  font-size: 14px;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
  width: $control-width;
  text-align: center;
  padding: 0;
}

.smart-form :deep(.el-form-item__content) {
  flex: none;
  width: $control-width;
  display: flex;
  flex-direction: column;
  align-items: stretch; /* 子元素拉伸对齐 */
}

// =============== 单选按钮 - 竖向统一宽度 ===============
.radio-group-soft {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;

  :deep(.el-radio) {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 0 !important;
  }

  :deep(.el-radio__label) {
    font-weight: 500;
    padding-left: 0;
  }

  :deep(.el-radio__input) {
    // display: none;
  }

  :deep(.el-radio__input.is-checked + .el-radio__label) {
    color: $primary-color;
  }

  :deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: $primary-color;
    background: $primary-color;
  }

  :deep(.el-radio__inner::after) {
    transform: scale(0.7);
    background: white;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
  }
}

// =============== 复选框 - 竖向统一宽度 ===============
.checkbox-group-pill {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: 100%;

  :deep(.el-checkbox) {
    margin-right: 0;
    display: flex;
    justify-content: center;

    .el-checkbox__label {
      background: #fff;
    }

    .el-checkbox__input {
      .el-checkbox__inner {
        width: 12px;
        height: 12px;
      }
    }
  }
}

.checkbox-pill {
  --el-checkbox-border-color: $border-color;
  --el-checkbox-input-checked-border-color: $primary-color;
  --el-checkbox-input-checked-bg-color: $primary-color;
  --el-checkbox-font-weight: 500;
  --el-checkbox-text-color: #555;
  --el-checkbox-input-border-radius: 20px;
  --el-checkbox-input-height: 28px;
  --el-checkbox-input-width: 28px;
  --el-checkbox-input-font-size: 12px;
  --el-checkbox-margin: 0;
}

.checkbox-pill :deep(.el-checkbox__input) {
  border-radius: 20px !important;
}

.checkbox-pill :deep(.el-checkbox__label) {
  padding: 0 10px;
  font-size: 13px;
  border-radius: 20px;
  background: #f0f2f5;
  color: #555;
  transition: all 0.2s ease;
}

.checkbox-pill :deep(.el-checkbox__input.is-checked .el-checkbox__label) {
  background: $primary-color;
  color: white;
}

// =============== 下拉 & 输入框 - 统一宽度 ===============
.select-rounded,
.input-rounded {
  width: 100%;
  :deep(.el-input__wrapper) {
    width: 100%;
    border-radius: $radius-md;
    border: 1px solid $border-color;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
  }

  :deep(.el-input__wrapper:hover) {
    border-color: $primary-color;
    box-shadow: 0 2px 8px 0 rgba($primary-color, 0.15);
  }
}

// 下拉弹窗圆角
:deep(.select-popper-rounded) {
  border-radius: $radius-md !important;
  box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.25);
}

// 响应式
@media (max-width: 768px) {
  .search-sidebar {
    max-width: 95vw;
    border-radius: 12px;
  }

  .scrollable-content {
    max-height: 300px;
  }
}
</style>
